<template>
    <div>
       <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :inline="true" :model="form" label-width="80px" @submit.native.prevent>
            <el-form-item label="查询员工">
                <el-input prefix-icon="el-icon-search" @keyup.native.enter="queryEmp" v-model="form.empId" placeholder="请输入员工ID"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryEmp" type="primary" round>搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="emp" style="width: 100%">
            <el-table-column label="员工ID" prop="empId" width="80px"></el-table-column>
            <el-table-column label="员工名称" prop="empName" ></el-table-column>
            <el-table-column label="性别" prop="gender" width="80px"></el-table-column>
            <el-table-column label="年龄" prop="age" width="80px"></el-table-column>
            <el-table-column label="工资" prop="salary" width="80px"></el-table-column>
            <el-table-column label="职位" prop="job"></el-table-column>
            <el-table-column label="员工部门" prop="empDept"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="delEmp(scope.row.empId)" circle></el-button>
                    <el-button type="primary" size="small" icon="el-icon-view" circle></el-button>
                    <el-button @click="modifyEmp(scope.row.empId)" type="success" size="small" icon="el-icon-edit" circle></el-button>
                    <el-button type="warning" size="small" icon="el-icon-cold-drink" circle></el-button>
                </template>
            </el-table-column>
        </el-table>    
        <el-pagination
            @current-change="pageChange"
            background
            :page-size="pagesize"
            :current-page="page"
            layout="->,prev, pager, next"
            :total="sum">
        </el-pagination>

        <el-dialog title="修改员工" :visible.sync="dialogFormVisible">
                <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="员工姓名" prop="empName">
          <el-input v-model="form.empName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="form.gender" label="男">男</el-radio>
          <el-radio v-model="form.gender" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="工资" prop="salary">
          <el-input v-model="form.salary"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="job">
          <el-input v-model="form.job"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="empDept">
          <el-select v-model="form.empDept" placeholder="请选择部门">
            <el-option v-for="item in depts" :key="item.deptId" :label="item.deptName" :value="item.deptName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmModify">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                depts:[],//部门下拉选
                dialogFormVisible:false,
                form:{
                    empId:'',
                    empName:'',
                    gender:'',
                    age:'',
                    salary:'',
                    job:'',
                    empDept:'',

                },
                emp: [],
                pagesize:6,
                page:1,
                sum:0,
                rules:{
                    empName:[{required:true,message:'姓名不能为空',trigger:'blur'}],
                    gender:[{required:true,message:'性别不能为空',trigger:'blur'}],
                    age:[{required:true,message:'年龄不能为空',trigger:'blur'}],
                    salary:[{required:true,message:'工资不能为空',trigger:'blur'}],
                    job:[{required:true,message:'职位不能为空',trigger:'blur'}],
                    empDept:[{required:true,message:'部门不能为空',trigger:'blur'}],
                }
            }
        },
        mounted(){
            //加载员工列表  分页查询
            let params={page:this.page,pagesize:this.pagesize}
            this.$http.empApi.pageList(params).then(res=>{
                //console.log(res);
                this.emp=res.data.data[0]
                this.sum=res.data.data[1][0].sum
            }).catch(err=>console.log(err))

            //加载部门下拉选的内容
            this.$http.deptApi.queryAll().then(res=>{
                console.log(res);
                this.depts=res.data.data
            }).catch(err=>console.log(err))
        },
        methods:{
            // 通过id查员工
            queryEmp(){
                if(this.form.empId){
                    this.$http.empApi.queryById(this.form.empId).then(res=>{
                    console.log(res);
                    this.emp=res.data.data
                    }).catch(err=>console.log(err))
                }else{
                    this.loadEmp()
                }
                
            },
            // 加载员工列表
            loadEmp(){
                //加载员工列表  分页查询
                let params={page:this.page,pagesize:this.pagesize}
                this.$http.empApi.pageList(params).then(res=>{
                //console.log(res);
                this.emp=res.data.data[0]
                this.sum=res.data.data[1][0].sum
                }).catch(err=>console.log(err))
            },
            //删除员工
            delEmp(bid){
                this.$http.empApi.delete({empId:bid}).then(res=>{
                    console.log(res);
                    if(res.data.code==200){
                        this.$message({
                            type:'success',
                            message:'删除员工成功'
                        })
                        this.loadEmp()
                    }
                }).catch(err=>console.log(err))
            },
            // 页码改变时，列表也变化
            pageChange(page){
                //console.log(page);
                this.page=page
                let params={page,pagesize:this.pagesize}
                this.$http.empApi.pageList(params).then(res=>{
                //console.log(res);
                this.emp=res.data.data[0]
                this.sum=res.data.data[1][0].sum
                }).catch(err=>console.log(err))
            },
            // 修改员工信息
            modifyEmp(id){
                this.dialogFormVisible=true;
                // 信息回填
                this.$http.empApi.queryById(id).then(res=>{
                    //console.log(res);
                    this.form=res.data.data[0]
                    }).catch(err=>console.log(err))
                    // 存要修改的员工的id
                this.$store.commit('setEmpId',id)    
            },
             // 确认修改
    confirmModify() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {
            empId: this.$store.state.empId,
            empName:this.form.empName,
            gender:this.form.gender,
            age:this.form.age,
            salary:this.form.salary,
            job:this.form.job,
            empDept:this.form.empDept,
          };
          this.$http.empApi
            .modify(params)
            .then((res) => {
              //console.log(res);
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改员工成功！",
                });
                this.$refs["form"].resetFields();
                this.dialogFormVisible = false;
                this.loadEmp();
              }
            })
            .catch((err) => console.log(err));
        } else {
          this.$message({
            type: "error",
            message: "表单填写错误！",
          });
        }
      });
    },

        }
    }
</script>

<style lang="scss" scoped>

</style>